// Colors
$black: #101820;
$half-black: rgba($black, 0.5);
$white: #ffffff;
$half-white: rgba($white, 0.5);
$green: #59B287;
$light-green: #ddffdb;
$light-yellow: #fffedb;
$yellow: #C4A731;
$light-blue: #9095C5;
$blue: #2D3589;
$lightest-grey: #f5f5f5;
$light-grey: #e6e5e6;
$medium-grey-alt: #98a2ad;
$medium-grey: #878b8f;
$dark-grey: #1A232C;
$red: #FC4C02;
$light-red: lighten($red, 20%);
$blue-grey: #222C36;

// Highlight – Used for Sponsor news items
$highlight: #fafafa;

// Podcasts - Sometimes we wanna loop through 'em
$podcasts: podcast, founderstalk, gotime, jsparty, practicalai, backstage, brainscience, shipit, master;

// Podcast Colors
$podcast: #9E978E;
$podcast-transparent: rgba(darken($podcast, 45%), 0.6);

$founderstalk: #3CDBC0;
$founderstalk-transparent: rgba(darken($founderstalk, 40%), 0.3);

$gotime: #59CBE8;
$gotime-transparent: rgba(darken($gotime, 50%), 0.3);

$jsparty: #FFCD00;
$jsparty-transparent: rgba(darken($jsparty, 40%), 0.4);

$practicalai: #4C5FAA;
$practicalai-transparent: rgba(darken($practicalai, 50%), 0.3);

$backstage: #FC4C02;
$backstage-transparent: rgba(darken($backstage, 30%), 0.6);

$brainscience: #F9423A;
$brainscience-transparent: rgba(darken($brainscience, 30%), 0.6);

// Borders
$border-color: $lightest-grey;
$base-border-radius: 3px;

// Typography
$body-copy-color: $black;
$root-font-size: 16px;
$content-fallback: Arial, sans-serif;
$content: 'Sana Sans', $content-fallback;
$display: 'Helvetica Condensed', 'Helvetica Narrow', 'Arial Narrow', 'Arial', sans-serif;
$code: 'Roboto Mono', Courier, monospace;

// Roboto Mono - Weight Key
// --
// thin > 100
// light > 300
// regular > 400
// medium > 500
// bold > 700

// Links
$base-link-color: $green;
$base-hover-color: darken($green, 10%);

// Spacing
$base-spacing: 35px;
$mobile-spacing: 20px;

// Transitions
$base-easing: ease-in-out;

// Layout -- Deprecated
$smartphone: 452px;
$tablet: 768px;
$desktop: 1080px;

$padding-extra-small: calc(12px / $root-font-size * 1rem);
$padding-small: calc(16px / $root-font-size * 1rem);
$padding-medium: calc(20px / $root-font-size * 1rem);
$padding-large: calc(26px / $root-font-size * 1rem);
$padding-extra-large: calc(54px / $root-font-size * 1rem);

// Elements – Update if changes are made to these components
$header-height: 63px;
$header-height--mobile: 50px;
$footer-height: 84px;
